<script lang="ts" setup>
import { ref } from 'vue';
import type { FormInstance } from '@arco-design/web-vue/es/form';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import { useRouter } from 'vue-router';
import RichEditor from '@/settings/components/rich-editor/index.vue';
import { useI18n } from 'vue-i18n';
import {
  TYPE_STICK_OFF,
  STATUS_OFFLINE,
} from './use';

const props = defineProps({
  id: {
    type: String,
    default: '',
  },
});

const loading = ref(false);
const formData = ref({
  labelIdList: [],
  informationTitle: '',
  informationMsg: '',
  coverUrl: '',
  informationContent: '',
  informationType: NaN,
  informationState: NaN,
  informationKeywords: '',
  publishTime: '',
});
const formRef = ref<FormInstance>();
const router = useRouter();
const { success } = useNotification();
const labels = ref<Record<string, any>[]>([]);
const { t } = useI18n();

const save = async () => {
  const { isSuccess } = await $fetch(props.id ? '/admin/information/update' : '/admin/information/create', {
    method: 'post',
    data: {
      informationId: props.id,
      ...formData.value,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.notification.success'));
    router.push('/direction/journalism/index');
  }
};

const draft = () => {
  formData.value.informationType = TYPE_STICK_OFF;
  formData.value.informationState = STATUS_OFFLINE;

  save();
}

const submit = async () => {
  const res = await formRef.value?.validate();

  if (res) {
    return;
  }

  if (!props.id) {
    formData.value.informationType = TYPE_STICK_OFF;
    formData.value.informationState = STATUS_OFFLINE;
  }

  save();
};

const getDetail = async () => {
  const { isSuccess, data } = await $fetch('/admin/information/detail', {
    data: {
      id: props.id,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    formData.value = {
      labelIdList: data.labelVOList?.map((item: any) => item.labelId) ?? [],
      informationTitle: data.informationTitle,
      informationMsg: data.informationMsg,
      coverUrl: data.coverUrl,
      informationContent: data.informationContent,
      informationType: data.informationType,
      informationState: data.informationState,
      informationKeywords: data.informationKeywords,
      publishTime: data.publishTime,
    };
  }
}

const getLabels = async () => {
  const { isSuccess, data } = await $fetch('/admin/label/list');

  if (isSuccess) {
    labels.value = data;
  }
};

const init = () => {
  getLabels();

  if (props.id) {
    getDetail();
  }
}

init();
</script>

<template>
  <OpenPageSection>
    <OpenGeneralCard>
      <AForm ref="formRef" auto-label-width scroll-to-first-error :model="formData" @submit="submit">
        <AFormItem :label="$t('settings.view.journalism.add.column1')" field="informationTitle" :rules="[{ required: true, message: $t('settings.notification.required') }, { maxLength: 150 }]">
          <AInput v-model="formData.informationTitle" :max-length="150" allow-clear show-word-limit />
        </AFormItem>

        <AFormItem :label="$t('settings.view.journalism.add.column2')" field="informationMsg" :rules="[{ required: true, message: $t('settings.notification.required') }, { maxLength: 400 }]">
          <ATextarea v-model="formData.informationMsg" :max-length="400" allow-clear show-word-limit />
        </AFormItem>

        <AFormItem :label="$t('settings.view.journalism.add.column6')" field="commKeywords" :help="$t('settings.view.journalism.add.help6')">
          <ATextarea v-model="formData.informationKeywords" :max-length="500" allow-clear show-word-limit />
        </AFormItem>

        <AFormItem :label="$t('settings.view.journalism.add.column3')" field="coverUrl" :rules="[{ required: true, message: $t('settings.notification.uploadRequired') }]" :help="$t('settings.view.journalism.add.help3')">
          <OpenUpload v-model="formData.coverUrl" />
        </AFormItem>

        <AFormItem :label="$t('settings.view.journalism.add.column4')" field="labelIdList" :help="$t('settings.view.journalism.add.help4')">
          <ASelect v-model="formData.labelIdList" :fallback-option="false" multiple :limit="5">
            <AOption v-for="label in labels" :key="label.labelId" :value="label.labelId">{{ label.labelName }}</AOption>
          </ASelect>
        </AFormItem>

        <AFormItem :label="$t('settings.view.journalism.add.column7')" field="publishTime" :rules="[{ required: true, message: $t('settings.notification.required') }]">
          <ADatePicker v-model="formData.publishTime" show-time />
        </AFormItem>

        <AFormItem :label="$t('settings.view.journalism.add.column5')" field="informationContent" :rules="[{ required: true, message: $t('settings.notification.required') }]">
          <RichEditor :height="800" v-model="formData.informationContent" />
        </AFormItem>

        <ADivider />

        <AFormItem>
          <ASpace>
            <AButton :loading="loading" @click="draft" v-if="!props.id">{{ $t('settings.view.journalism.add.draft') }}</AButton>
            <AButton html-type="submit" type="primary" :loading="loading">{{ $t('settings.action.submit') }}</AButton>
          </ASpace>
        </AFormItem>
      </AForm>
    </OpenGeneralCard>
  </OpenPageSection>
</template>

<style lang="scss" scoped>
</style>
